import {designPage, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Button, Checkbox, Form, FormInput, FormItem, FormSelect, SelectOption} from "../../../../packages";
import {PlainObject} from "plain-utils/utils/event";
import {Input} from "../../../../packages/components/Input";

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
      registryCapital: { label: 'Form.rules->label', required: true },
    },
  });

  const dynamicRequired = (formData: PlainObject | null | undefined) => {
    return !!formData!.enterpriseName;
  };

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="基本用法">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormInput
          label="FormInput.required"
          v-model={state.formData.enterpriseName}
          placeholder="企业名称"
          required
        />
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
        />
        <FormInput
          label="Form.rules->label"
          v-model={state.formData.registryCapital}
          placeholder="注册资本"
        />
        <FormInput
          label="FormItem.required有值时必填"
          v-model={state.formData.businessNature}
          placeholder="经营范围"
          required={dynamicRequired}
        />
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验string">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormInput
          label="FormInput.required"
          v-model={state.formData.enterpriseName}
          placeholder="string,min:3,max:5"
          required
          rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}
        />
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
        />

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验number">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormInput
          label="FormInput.required"
          v-model={state.formData.enterpriseName}
          placeholder="number,min:3,max:5"
          required
          rules={{ type: 'number', min: 3, max: 5 }}
        />
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
        />

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验array">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormSelect
          label="FormSelect.required"
          v-model={state.formData.enterpriseName}
          placeholder="array,min:3,max:5"
          required
          rules={{ type: 'array', min: 3, max: 5 }}
          multiple
        >
          <SelectOption children="支付宝" value="alipay"/>
          <SelectOption children="微信支付" value="wechat_pay"/>
          <SelectOption children="财付通" value="qq_pay"/>
          <SelectOption children="快支付" value="fast_pay"/>
          <SelectOption children="云闪付" value="cloud_pay"/>
          <SelectOption children="网银支付" value="net_pay"/>
          <SelectOption children="快捷支付" value="convince_pay"/>
          <SelectOption children="paypal" value="paypal"/>
        </FormSelect>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
        />

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo5 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验arraystring">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormSelect
          label="FormSelect.required"
          v-model={state.formData.enterpriseName}
          placeholder="arraystring,min:3,max:5"
          required
          rules={{ type: 'arraystring', min: 3, max: 5 }}
          multiple
          valueType="arraystring"
        >
          <SelectOption children="支付宝" value="alipay"/>
          <SelectOption children="微信支付" value="wechat_pay"/>
          <SelectOption children="财付通" value="qq_pay"/>
          <SelectOption children="快支付" value="fast_pay"/>
          <SelectOption children="云闪付" value="cloud_pay"/>
          <SelectOption children="网银支付" value="net_pay"/>
          <SelectOption children="快捷支付" value="convince_pay"/>
          <SelectOption children="paypal" value="paypal"/>
        </FormSelect>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
        />

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo6 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
    input: Input,
  });

  const state = reactive({
    formData: {} as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验arrayjson">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormSelect
          label="FormSelect.required"
          v-model={state.formData.enterpriseName}
          placeholder="arrayjson,min:3,max:5"
          required
          rules={{ type: 'arrayjson', min: 3, max: 5 }}
          multiple
          valueType="arrayjson"
        >
          {{
            default: () => <>
              <SelectOption children="支付宝" value="alipay"/>
              <SelectOption children="微信支付" value="wechat_pay"/>
              <SelectOption children="财付通" value="qq_pay"/>
              <SelectOption children="快支付" value="fast_pay"/>
              <SelectOption children="云闪付" value="cloud_pay"/>
              <SelectOption children="网银支付" value="net_pay"/>
              <SelectOption children="快捷支付" value="convince_pay"/>
              <SelectOption children="paypal" value="paypal"/>
            </>,
          }}
        </FormSelect>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormInput
            label="FormInput.rules[0].required"
            v-model={state.formData.address}
            placeholder="所在地"
            required
            rules={[{ required: true }, { pattern: /\d/ }]}
          />
        )}
        <FormInput
          label="Form.rules->field"
          field="legalName"
          v-model={state.formData.legalName}
          placeholder="法人代表"
          editorRef={onRef.input}
        />

        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary" style={{ marginRight: '4px' }}/>
          <Button label="Last Input Focus" onClick={() => refs.input?.focus()} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});
